// 封装配置表单
<template>
  <div class="x-form">
    <!-- 在form表单前的插槽 -->
    <slot name="before-form"></slot>
    <el-form
      :model="form"
      v-bind="$attrs"
      v-on="$listeners"
      :ref="formRef"
      :style="{ '--item': marginBottom }"
    >
      <el-form-item
        v-for="(item, index) in formItemConfig"
        :key="index"
        :label="item.label"
        :class="`x_form_item x_form_item_${index}`"
        :prop="item.rule ? item.prop : null"
      >
        <!-- input -->
        <div v-if="item.type === 'input'">
          <el-input
            v-model="form[item.prop]"
            :type="item.inputType || 'text'"
            :placeholder="item.placeholder || '请输入'"
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
            :class="`x_form_input_${index} x_form_input`"
            :show-password="item.showPassword || false"
            :style="`width:${item.width}px`"
            @blur="
              emitFunc(item.method || 'defaultMethod', {
                value: form[item.prop],
                additionalParams: item.addParams || '',
              })
            "
            @keyup.enter.native="
              emitFunc(item.enterMethod || 'entherMethod', {
                value: form[item.prop],
                additionalParams: item.addParams || '',
              })
            "
          ></el-input>
        </div>
        <!-- select -->
        <div v-if="item.type === 'select'">
          <el-select
            v-model="form[item.prop]"
            :placeholder="item.placeholder || '请选择'"
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
            :clearable="item.clearable || false"
            :multiple="item.multiple || false"
            :filterable="item.filterable || true"
            :default-first-option="true"
            :allow-create="item.allowCreate || false"
            :style="`width:${item.width}px`"
            @change="
              emitFunc(item.method || 'defaultMethod', {
                value: form[item.prop],
                additionalParams: item.addParams || '',
              })
            "
          >
            <!-- 这里需要你传入该单选循环的数组 -->
            <el-option
              v-for="_item in item.options"
              :key="_item[item.optionValue || 'value']"
              :label="_item[item.optionLabel || 'label']"
              :value="_item[item.optionValue || 'value']"
            >
            </el-option>
          </el-select>
        </div>
        <!-- button -->
        <div v-if="item.type === 'button'">
          <el-button
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
            :type="item.btnType || 'primary'"
            @click="emitFunc(item.method || 'defaultMethod')"
            >{{ item.text }}</el-button
          >
        </div>
        <!-- 日期选择器 -->
        <div v-if="item.type === 'datePicker'">
          <el-date-picker
            v-model="form[item.prop]"
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
            :type="item.dateType || 'date'"
            :placeholder="item.placeholder || '选择日期'"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            :range-separator="item.separator || '至'"
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :end-placeholder="item.endPlaceholder || '结束日期'"
            :default-time="item.defaultTime || false"
            :style="`width:${item.width}px`"
            @change="
              emitFunc(item.method || 'defaultMethod', {
                value: form[item.prop],
                additionalParams: item.addParams || '',
              })
            "
          >
          </el-date-picker>
        </div>
        <!-- 多选框 -->
        <div v-if="item.type === 'checkbox'">
          <el-checkbox-group
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
            v-model="form[item.prop]"
            :max="item.max"
            :min="item.min"
          >
            <el-checkbox
              v-for="_item in item.checkBoxList"
              :key="_item.id"
              :label="_item.label"
            ></el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 单选框 -->
        <div v-if="item.type === 'radio'">
          <el-radio-group
            v-model="form[item.prop]"
            :disabled="
              item.disabled
                ? item.disabled({
                    exParams: exParams,
                    form: form,
                  })
                : false
            "
          >
            <el-radio
              v-for="_item in radioList"
              :key="_item.id"
              :label="item.label"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </div>
      </el-form-item>
    </el-form>
    <!-- 在form表单后的插槽 -->
    <slot name="after-form"></slot>
  </div>
</template>

<script>
export default {
  name: "WebManagerIndex",

  props: {
    // x-from 绑定的对象
    form: {
      type: Object,
      default: () => {},
    },
    // x-from 需要的配置数组
    formItemConfig: {
      type: Array,
      default: () => [],
    },
    // 每个item 对底部外边距
    marginBottom: {
      type: String,
      default: () => "20px",
    },
    // 大多情况下并不需要的 自定义ref名字
    formRef: {
      type: String,
      default: () => "xFrom",
    },
    // 如果你需要额外的参数来控制是否禁用
    exParams: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    emitFunc(method, value) {
      this.$emit(method, value);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin-bottom: var(--item);
  }
}
</style>
